<template>
    <div>
        <el-button @click="addFamilyMember" round>添加家庭成员</el-button>
    </div>
    <div>
        <el-table :data="familyMemberData" style="width: 50%">
            <el-table-column fixed prop="name" label="姓名" width="100" />
            <el-table-column prop="phone" label="电话" />
        </el-table>
    </div>
    <div class="block">
        <span class="demonstration">With quick options</span>
        <el-date-picker v-model="para.Time" type="monthrange" unlink-panels range-separator="To"
            start-placeholder="Start month" end-placeholder="End month" :shortcuts="shortcuts" value-format="YYYY-MM-DD"/>
    </div>

    <el-button @click="listIncome" round>查询</el-button>
    <div ref="bar" style="width: 300px;height: 400px; margin-left: 20px;"></div>
    <el-dialog v-model="familyMemberDialog">
        <el-form :model="form" label-width="120px">
            <el-form-item label="姓名">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="form.phone" />
            </el-form-item>
            <el-button type="primary" @click="createFamilyMember" round>确定</el-button>
        </el-form>
    </el-dialog>
</template>

<script  setup>
import axios from 'axios';
import { ElMessage } from 'element-plus'
import { fromPairs, partial } from 'lodash';
import { onMounted, ref, reactive } from 'vue';
import { init } from 'echarts'



const bar = ref()
//月份选择的内容
const monthSelect = ref('')
//月份选择
const shortcuts = [
  {
    text: 'This month',
    value: [new Date(), new Date()],
  },
  {
    text: 'This year',
    value: () => {
      const end = new Date()
      const start = new Date(new Date().getFullYear(), 0)
      return [start, end]
    },
  },
  {
    text: 'Last 6 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 6)
      return [start, end]
    },
  },
]


//家庭成员表格
const familyMemberData = ref([])
//发起显示家庭成员请求
let getFamilyMemberList = () => {
    axios({
        method: "Get",
        url: "/api/family/listMember",
    }).then((resp) => {
        if (resp.data.code === 200) {
            familyMemberData.value = resp.data.data
        }
    })
}

//添加家庭成员弹窗
const familyMemberDialog = ref(false)
//添加家庭成员按钮
const addFamilyMember = () => {
    familyMemberDialog.value = true;
}

const form = reactive({
    name: '',
    phone: '',
})

//发起添加家庭成员请求
const createFamilyMember = () => {
    axios({
        data: form,
        method: "POST",
        url: "/api/family/add"
    }).then((resp) => {
        if (resp.data.code === 200) {
            ElMessage({
                type: 'success',
                message: '添加成功',
            })
            familyMemberDialog.value = false;
            getFamilyMemberList();
        }
    })
}

const para =ref({
    Time: [],
    startTime:null,
    endTime:null
})
//家庭收入支付方式统计数据
const incomeCensusByModeData = ref([]);
//发起请求获取 家庭收入支付方式统计数据
const listIncome = () => {
    if(para.value.Time){
        para.value.startTime=para.value.Time[0];
        para.value.endTime=para.value.Time[1];
    }
    console.log(monthSelect.value)
    axios({
        data: para.value,
        method: "Post",
        url: "/api/family/listIncome"
    }).then((resp) => {
        if (resp.data.code === 200) {
            console.log(resp.data.data)
            incomeCensusByModeData.value = resp.data.data.map((item) => item.money
            );
        }
        let myChart = init(bar.value)
        // 配置图表
        let option = {
            title: {
                text: '家庭收入统计'
            },
            //提示框
            tooltip: {},
            legend: {
                data: ['']
            },
            //x轴显示种类
            xAxis: {
                data: ['微信', '支付宝', '银行卡']
            },
            //y轴可填数值等
            yAxis: {

            },
            series: [{
                name: '销量',
                type: 'bar',
                //y轴数值
                data: incomeCensusByModeData.value
            }]
        }
        myChart.setOption(option)
    })
}


onMounted(() => {
    getFamilyMemberList();
    listIncome();


})
</script>